<!--  -->
<template>
  <div class="nav noselect">
    <el-scrollbar style="width:100%;">
      <ul class="list">
        <li
          v-for="item in currentNav.list"
          :key="item.index"
          :class="{item: true, active: currentNav.index === item.path}"
          :title="item.name"
          @click.stop="chooseNav(item.path)"
        >{{item.name}} <i
            v-if="item.path !== '/backend/user'"
            title="删除"
            class="icon iconfont icon-shanchu"
            @click.stop="deleteNav(item.path)"
          ></i></li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['currentNav'])
  },
  mounted () {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      // 回退时执行goback方法
      window.addEventListener('popstate', this.goBack, false)
    }
  },
  // 页面销毁时，取消监听。否则其他vue路由页面也会被监听
  destroyed () {
    window.removeEventListener('popstate', this.goBack, false)
  },
  watch: {
    $route (to, from) {
    }
  },
  methods: {
    deleteNav (path) {
      this.$store.dispatch('navDelete', { path })
    },
    chooseNav (path) {
      if (this.currentNav.index !== path) {
        this.$store.dispatch('navChange', { path })
      }
    },
    goBack () {
      let path = removeURLParameter(this.$route.fullPath, 'jsessionid')
      if (this.currentNav.index === path) {
        window.history.go(-1)
      } else {
        this.currentNav.index = path
        this.$store.dispatch('navBackChange', { path })
      }
    }
  }
}
const removeURLParameter = (url, parameter) => {
  let urlparts = url.split('?')
  if (urlparts.length >= 2) {
    let prefix = encodeURIComponent(parameter) + '='
    let pars = urlparts[1].split(/[&;]/g)
    for (let i = pars.length; i-- > 0;) {
      if (pars[i].lastIndexOf(prefix, 0) !== -1) {
        pars.splice(i, 1)
      }
    }
    return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '')
  }
  return url
}
</script>

<style scoped>
.nav {
  background-color: #eeeeee;
  height: 36px;
  width: 100%;
}
.nav /deep/ .el-scrollbar__wrap {
  overflow-y: hidden;
}
.nav /deep/ .el-scrollbar__bar.is-vertical{
  display: none;
}
.list {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  height: 36px;
}
.item {
  line-height: 36px;
  padding: 0 14px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items:flex-start;
  color: #303133;
  cursor: pointer;
  min-width: 80px;
}
.item .icon {
  margin-left: 8px;
  font-size: 12px;
  cursor: pointer;
}
.item .icon:hover {
  color: #409eff;
}
.list .active {
  background-color: #ffffff;
  margin-top: 1px;
  white-space: nowrap;
  flex: 0 0 auto;
}
</style>
